<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>CSS Variable - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">

  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <link id="theme" href="/src/themes/test/css-variables/css/default.css" rel="stylesheet">

  <style>
    .wrapper {
      display: flex;
      flex-direction: row;
    }

    section {
      width: 25%;
      padding: 0 8px;
    }

    .right-container {
      display: flex;
      height: 100%;
      align-items: center;
    }

    .right-container ion-select {
      padding-top: 0;
      padding-bottom: 0;
    }

    ion-fab-button {
      display: inline-block;
    }

    ion-segment {
      margin-bottom: 8px;
    }

    ion-toolbar ion-segment {
      margin-bottom: 0;
    }

    .icon-section ion-icon {
      font-size: 48px;
    }

  </style>
</head>

<body>
  <ion-app>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="list">
          <ion-label>Lists</ion-label>
          <ion-icon name="list"></ion-icon>
        </ion-tab-button>
        <ion-tab-button tab="colors">
          <ion-label>Colors</ion-label>
          <ion-icon name="brush"></ion-icon>
        </ion-tab-button>
        <ion-tab-button tab="overlays">
          <ion-label>Overlays</ion-label>
          <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>

      <ion-tab tab="list">
        <ion-header>
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-back-button default-href="/"></ion-back-button>
              <ion-menu-button auto-hide="false"></ion-menu-button>
              <ion-button>Default</ion-button>
              <ion-button fill="solid">Solid</ion-button>
              <ion-button fill="clear">Clear</ion-button>
              <ion-button fill="outline">Outline</ion-button>
            </ion-buttons>

            <ion-title>Lists</ion-title>

            <ion-buttons slot="primary">
              <ion-back-button color="secondary" default-href="/"></ion-back-button>
              <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
              <ion-button color="secondary">Default</ion-button>
              <ion-button color="secondary" fill="solid">Solid</ion-button>
              <ion-button color="secondary" fill="clear">Clear</ion-button>
              <ion-button color="secondary" fill="outline">Outline</ion-button>
            </ion-buttons>
          </ion-toolbar>
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-back-button class="ion-focused" default-href="/"></ion-back-button>
              <ion-menu-button class="ion-focused" auto-hide="false"></ion-menu-button>
              <ion-button class="ion-focused">Default</ion-button>
              <ion-button class="ion-focused" fill="solid">Solid</ion-button>
              <ion-button class="ion-focused" fill="clear">Clear</ion-button>
              <ion-button class="ion-focused" fill="outline">Outline</ion-button>
            </ion-buttons>

            <ion-title>Lists</ion-title>

            <ion-buttons slot="primary">
              <ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button>
              <ion-menu-button color="secondary" class="ion-focused" auto-hide="false"></ion-menu-button>
              <ion-button color="secondary" class="ion-focused">Default</ion-button>
              <ion-button color="secondary" class="ion-focused" fill="solid">Solid</ion-button>
              <ion-button color="secondary" class="ion-focused" fill="clear">Clear</ion-button>
              <ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button>
            </ion-buttons>
          </ion-toolbar>
          <ion-toolbar>
            <ion-segment value="default" class="theme-picker">
              <ion-segment-button value="default">
                <ion-label>Default</ion-label>
              </ion-segment-button>
              <ion-segment-button value="oceanic">
                <ion-label>Oceanic</ion-label>
              </ion-segment-button>
              <ion-segment-button value="vibrant">
                <ion-label>Vibrant</ion-label>
              </ion-segment-button>
              <ion-segment-button value="dark">
                <ion-label>Dark</ion-label>
              </ion-segment-button>
              <ion-segment-button value="toolbar">
                <ion-label>Toolbar</ion-label>
              </ion-segment-button>
              <ion-segment-button disabled>
                  <ion-label>Disabled</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-toolbar>
        </ion-header>

        <ion-content class="ion-padding">
          <div class="wrapper">
            <section>
              <ion-card>
                <ion-card-header>
                  <ion-card-title>Card Header</ion-card-title>
                </ion-card-header>

                <ion-card-content>
                  Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a
                  week in the woods.
                  Wash your spirit clean.
                </ion-card-content>
              </ion-card>
              <ion-card>
                <ion-item>
                  <ion-icon name="pin" slot="start"></ion-icon>
                  ion-item in a card, icon left, button right
                  <ion-button fill="outline" slot="end">View</ion-button>
                </ion-item>

                <ion-card-content>
                  This is content, without any paragraph or header tags, within an ion-card-content element.
                </ion-card-content>
              </ion-card>

              <ion-card>
                <ion-item href="#" class="ion-activated">
                  <ion-icon name="wifi" slot="start"></ion-icon>
                  Card Link Item 1 activated
                </ion-item>

                <ion-item href="#">
                  <ion-icon name="wine" slot="start"></ion-icon>
                  Card Link Item 2
                </ion-item>

                <ion-item button class="ion-activated">
                  <ion-icon name="warning" slot="start"></ion-icon>
                  Card Button Item 1 activated
                </ion-item>

                <ion-item button class="ion-focused">
                  <ion-icon name="walk" slot="start"></ion-icon>
                  Card Button Item 2 focused
                </ion-item>
              </ion-card>
            </section>

            <section>
              <ion-list>
                <ion-item button>
                  <ion-label>Pokémon Yellow</ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item button>
                  <ion-label>Super Metroid</ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item href="#">
                  <ion-label>Mega Man X</ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item href="#" class="ion-activated">
                  <ion-label>The Legend of Zelda</ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item>
                  <ion-label>Pac-Man</ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item>
                  <ion-label>
                    <h2>Super Mario World</h2>
                    <p>Featuring Luigi</p>
                  </ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item>
                  <ion-label>
                    <h2>Street Fighter II</h2>
                    <p>The Sequel</p>
                  </ion-label>
                  <ion-note slot="end">Note</ion-note>
                </ion-item>
                <ion-item-divider>Sliding Items</ion-item-divider>
                <ion-item-sliding>
                  <ion-item>
                    <ion-label>Half Life</ion-label>
                  </ion-item>
                  <ion-item-options>
                    <ion-item-option>More</ion-item-option>
                  </ion-item-options>
                </ion-item-sliding>
                <ion-item-sliding>
                  <ion-item color="secondary">
                    <ion-label>Final Fantasy VII</ion-label>
                  </ion-item>
                  <ion-item-options>
                    <ion-item-option>More</ion-item-option>
                  </ion-item-options>
                </ion-item-sliding>
                <ion-item-sliding>
                  <ion-item>
                    <ion-label>Tetris</ion-label>
                  </ion-item>
                  <ion-item-options>
                    <ion-item-option>More</ion-item-option>
                  </ion-item-options>
                </ion-item-sliding>
                <ion-item-sliding>
                  <ion-item>
                    <ion-label>Donkey Kong III</ion-label>
                  </ion-item>
                  <ion-item-options>
                    <ion-item-option>More</ion-item-option>
                  </ion-item-options>
                </ion-item-sliding>
                <ion-item-sliding>
                  <ion-item>
                    <ion-label>Goldeneye 007</ion-label>
                  </ion-item>
                  <ion-item-options>
                    <ion-item-option disabled="true">More</ion-item-option>
                  </ion-item-options>
                </ion-item-sliding>
              </ion-list>
            </section>

            <section>
              <ion-list>
                <ion-radio-group id="fruitRadio" value="grape">
                  <ion-item-divider>
                    <ion-label>Fruits</ion-label>
                  </ion-item-divider>
                  <ion-item>
                    <ion-label>Apple</ion-label>
                    <ion-radio slot="start" value="apple"></ion-radio>
                  </ion-item>

                  <ion-item>
                    <ion-label>Grape, checked, disabled</ion-label>
                    <ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
                  </ion-item>

                  <ion-item>
                    <ion-label>Cherry</ion-label>
                    <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
                  </ion-item>
                </ion-radio-group>
              </ion-list>

              <ion-list>
                <ion-radio-group id="fruitRadio" value="lettuce">
                  <ion-item-divider>
                    <ion-label>Veggies</ion-label>
                  </ion-item-divider>
                  <ion-item>
                    <ion-label>Celery</ion-label>
                    <ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
                  </ion-item>

                  <ion-item>
                    <ion-label>Lettuce, checked, disabled</ion-label>
                    <ion-radio color="tertiary" slot="start" value="lettuce" disabled></ion-radio>
                  </ion-item>

                  <ion-item>
                    <ion-label>Onion</ion-label>
                    <ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
                  </ion-item>
                </ion-radio-group>
              </ion-list>

              <ion-list>
                <ion-item>
                  <ion-range value="20"></ion-range>
                </ion-item>

                <ion-item>
                  <ion-range color="success" value="20"></ion-range>
                </ion-item>

                <ion-item>
                  <ion-range color="warning" value="20"></ion-range>
                </ion-item>

                <ion-item>
                  <ion-range color="danger" value="20"></ion-range>
                </ion-item>
              </ion-list>

            </section>

            <section>
              <ion-list>
                <ion-item>
                  <ion-label>Default</ion-label>
                  <ion-checkbox slot="end" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Primary</ion-label>
                  <ion-checkbox slot="end" color="primary" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Secondary</ion-label>
                  <ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Warning</ion-label>
                  <ion-checkbox slot="end" color="warning" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Danger</ion-label>
                  <ion-checkbox slot="end" color="danger" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Light</ion-label>
                  <ion-checkbox slot="end" color="light" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Dark</ion-label>
                  <ion-checkbox slot="end" color="dark" checked></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Unchecked by Default</ion-label>
                  <ion-checkbox slot="end"></ion-checkbox>
                </ion-item>
                <ion-item>
                  <ion-label>Disabled</ion-label>
                  <ion-checkbox slot="end" disabled></ion-checkbox>
                </ion-item>

                <ion-item>
                  <ion-toggle slot="start"></ion-toggle>
                  <ion-label>Blueberry</ion-label>
                </ion-item>

                <ion-item>
                  <ion-toggle color="success" slot="start" checked></ion-toggle>
                  <ion-label>Lettuce</ion-label>
                </ion-item>

                <ion-item>
                  <ion-toggle color="danger" slot="start" checked></ion-toggle>
                  <ion-label>Apple</ion-label>
                </ion-item>

                <ion-item>
                  <ion-toggle color="tertiary" slot="start" checked></ion-toggle>
                  <ion-label>Radish</ion-label>
                </ion-item>

                <ion-item>
                  <ion-toggle color="dark" slot="start" checked></ion-toggle>
                  <ion-label>Blackberry</ion-label>
                </ion-item>
              </ion-list>
            </section>
          </div>
        </ion-content>
      </ion-tab>

      <ion-tab tab="colors">
        <ion-header>
          <ion-toolbar>
            <ion-title>Colors</ion-title>
            <div slot="end" class="right-container">
              <ion-label>Select a Theme:</ion-label>
              <ion-select interface="popover" class="theme-picker">
                <ion-select-option value="default" selected>Default</ion-select-option>
                <ion-select-option value="oceanic">Oceanic</ion-select-option>
                <ion-select-option value="vibrant">Vibrant</ion-select-option>
                <ion-select-option value="dark">Dark</ion-select-option>
              </ion-select>
            </div>
          </ion-toolbar>
        </ion-header>

        <ion-content class="ion-padding">
          <div class="wrapper">
            <section>
              <p>
                <ion-button color="primary">Primary</ion-button>
                <ion-button color="secondary">Secondary</ion-button>
                <ion-button color="tertiary">Tertiary</ion-button>
                <ion-button fill="outline" color="success">Success Outline</ion-button>
                <ion-button fill="clear" color="warning">Warning Clear</ion-button>
                <ion-button color="danger">Danger</ion-button>
                <ion-button color="light">Light</ion-button>
                <ion-button color="dark">Dark</ion-button>
                <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
              </p>

              <p>
                <ion-button class="ion-focused" color="primary">Primary</ion-button>
                <ion-button class="ion-focused" color="secondary">Secondary</ion-button>
                <ion-button class="ion-focused" color="tertiary">Tertiary</ion-button>
                <ion-button class="ion-focused" fill="outline" color="success">Success Outline</ion-button>
                <ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button>
                <ion-button class="ion-focused" color="danger">Danger</ion-button>
                <ion-button class="ion-focused" color="light">Light</ion-button>
                <ion-button class="ion-focused" color="dark">Dark</ion-button>
                <ion-button class="ion-focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                <ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
              </p>

              <p>
                <ion-button class="ion-activated" color="primary">Primary</ion-button>
                <ion-button class="ion-activated" color="secondary">Secondary</ion-button>
                <ion-button class="ion-activated" color="tertiary">Tertiary</ion-button>
                <ion-button class="ion-activated" fill="outline" color="success">Success Outline</ion-button>
                <ion-button class="ion-activated" fill="clear" color="warning">Warning Clear</ion-button>
                <ion-button class="ion-activated" color="danger">Danger</ion-button>
                <ion-button class="ion-activated" color="light">Light</ion-button>
                <ion-button class="ion-activated" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                <ion-button class="ion-activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
              </p>
            </section>

            <section>
              <p>
                <ion-button>Default</ion-button>
                <ion-button>
                  <ion-icon slot="icon-only" name="star"></ion-icon>
                </ion-button>
                <ion-button>
                  <ion-icon slot="start" name="pin"></ion-icon>Map
                </ion-button>
                <ion-button shape="round">Round</ion-button>
                <ion-button fill="outline">Outline</ion-button>
                <ion-button fill="clear">Clear</ion-button>
                <ion-button fill="outline" expand="full">Full Outline</ion-button>
                <ion-button fill="clear" expand="block">Block Clear</ion-button>
              </p>

              <p>
                <ion-fab-button>
                  <ion-icon name="logo-facebook"></ion-icon>
                </ion-fab-button>
                <ion-fab-button size="small">
                  <ion-icon name="logo-twitter"></ion-icon>
                </ion-fab-button>
                <ion-fab-button color="secondary">
                  <ion-icon name="logo-vimeo"></ion-icon>
                </ion-fab-button>
                <ion-fab-button color="tertiary">
                  <ion-icon name="logo-instagram"></ion-icon>
                </ion-fab-button>
              </p>

              <p>
                <ion-chip>
                  <ion-label>Default</ion-label>
                </ion-chip>
                <ion-chip color="primary">
                  <ion-label>Primary</ion-label>
                </ion-chip>
                <ion-chip color="secondary">
                  <ion-label>Secondary</ion-label>
                </ion-chip>
                <ion-chip color="tertiary">
                  <ion-label>Tertiary</ion-label>
                </ion-chip>
                <ion-chip color="success">
                  <ion-label>Success</ion-label>
                </ion-chip>
                <ion-chip color="warning">
                  <ion-label>Warning</ion-label>
                </ion-chip>
                <ion-chip color="danger">
                  <ion-label>Danger</ion-label>
                </ion-chip>
                <ion-chip color="light">
                  <ion-label>Light</ion-label>
                </ion-chip>
                <ion-chip color="medium">
                  <ion-label>Medium</ion-label>
                </ion-chip>
                <ion-chip color="dark">
                  <ion-label>Dark</ion-label>
                </ion-chip>
              </p>

              <p>
                <ion-badge></ion-badge>
                <ion-badge color="primary">11</ion-badge>
                <ion-badge color="secondary">22</ion-badge>
                <ion-badge color="tertiary">33</ion-badge>
                <ion-badge color="success">44</ion-badge>
                <ion-badge color="warning">55</ion-badge>
                <ion-badge color="danger">66</ion-badge>
                <ion-badge color="light">77</ion-badge>
                <ion-badge color="medium">88</ion-badge>
                <ion-badge color="dark">99</ion-badge>
              </p>

              <p class="icon-section">
                <ion-icon name="logo-ionic" color="primary"></ion-icon>
                <ion-icon name="logo-angular"></ion-icon>
                <ion-icon name="heart" color="danger"></ion-icon>
                <ion-icon name="logo-ionitron" color="primary"></ion-icon>

                <ion-icon name="happy" color="warning"></ion-icon>
                <ion-icon name="people"></ion-icon>
                <ion-icon name="person" color="tertiary"></ion-icon>
                <ion-icon name="person-circle"></ion-icon>

                <ion-icon name="apps"></ion-icon>
                <ion-icon name="lock-closed"></ion-icon>
                <ion-icon name="key" color="success"></ion-icon>
                <ion-icon name="lock-open"></ion-icon>

                <ion-icon name="map" color="secondary"></ion-icon>
                <ion-icon name="navigate"></ion-icon>
                <ion-icon name="pin"></ion-icon>
                <ion-icon name="locate"></ion-icon>

                <ion-icon name="mic"></ion-icon>
                <ion-icon name="musical-notes" color="warning"></ion-icon>
                <ion-icon name="volume-high"></ion-icon>
                <ion-icon name="mic" color="tertiary"></ion-icon>

                <ion-icon name="cafe" color="success"></ion-icon>
                <ion-icon name="calculator"></ion-icon>
                <ion-icon name="bus"></ion-icon>
                <ion-icon name="wine" color="danger"></ion-icon>


              </p>
            </section>

            <section>
              <p>
                <ion-searchbar></ion-searchbar>
                <ion-searchbar color="primary"></ion-searchbar>
                <ion-searchbar color="tertiary"></ion-searchbar>
                <ion-searchbar color="warning"></ion-searchbar>
                <ion-searchbar color="light"></ion-searchbar>
                <ion-searchbar color="dark"></ion-searchbar>
              </p>
              <p>
                <ion-segment value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

                <ion-segment color="primary" value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

                <ion-segment color="secondary" value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

                <ion-segment color="success" value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

                <ion-segment color="light" value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

                <ion-segment color="medium" value="all">
                  <ion-segment-button value="all">All</ion-segment-button>
                  <ion-segment-button value="favorites">Favorites</ion-segment-button>
                </ion-segment>

              </p>
            </section>

            <section>
              <p>
                <ion-toolbar>
                  <ion-title>Default</ion-title>
                </ion-toolbar>

                <ion-toolbar>
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Toolbar</ion-title>
                </ion-toolbar>

                <ion-toolbar color="primary">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-segment value="favorites">
                    <ion-segment-button value="all">All</ion-segment-button>
                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
                  </ion-segment>
                </ion-toolbar>

                <ion-toolbar color="secondary">
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-searchbar></ion-searchbar>
                </ion-toolbar>

                <ion-toolbar color="tertiary">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Tertiary</ion-title>
                </ion-toolbar>

                <ion-toolbar color="success">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Success</ion-title>
                </ion-toolbar>

                <ion-toolbar color="warning">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Warning</ion-title>
                </ion-toolbar>

                <ion-toolbar color="danger">
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-searchbar></ion-searchbar>
                </ion-toolbar>

                <ion-toolbar color="light">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-segment value="favorites">
                    <ion-segment-button value="all">All</ion-segment-button>
                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
                  </ion-segment>
                </ion-toolbar>

                <ion-toolbar color="medium">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Medium</ion-title>
                </ion-toolbar>

                <ion-toolbar color="dark">
                  <ion-buttons slot="start">
                    <ion-button color="danger">
                      <ion-icon slot="icon-only" name="add"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-buttons slot="primary">
                    <ion-button>
                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                    </ion-button>
                  </ion-buttons>
                  <ion-title>Dark</ion-title>
                </ion-toolbar>
              </p>
            </section>
          </div>
        </ion-content>
      </ion-tab>

      <ion-tab tab="overlays">
        <ion-header>
          <ion-toolbar>
            <ion-title>Overlays</ion-title>
            <div slot="end" class="right-container">
              <ion-label>Select a Theme:</ion-label>
              <ion-select interface="popover" class="theme-picker">
                <ion-select-option value="default" selected>Default</ion-select-option>
                <ion-select-option value="oceanic">Oceanic</ion-select-option>
                <ion-select-option value="vibrant">Vibrant</ion-select-option>
                <ion-select-option value="dark">Dark</ion-select-option>
              </ion-select>
            </div>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <div class="wrapper">
            <!-- <section> -->
            <ion-list>
              <ion-item button onClick="presentAlert()">
                <ion-label>Present Alert</ion-label>
              </ion-item>
              <ion-item button onClick="presentActionSheet()">
                <ion-label>Present Action Sheet</ion-label>
              </ion-item>
              <ion-item button onClick="presentLoading()">
                <ion-label>Present Loading</ion-label>
              </ion-item>
              <ion-item button onClick="presentModal()">
                <ion-label>Present Modal</ion-label>
              </ion-item>
              <ion-item button onClick="presentPopover(event)">
                <ion-label>Present Popover</ion-label>
              </ion-item>
              <ion-item button onClick="presentToast()">
                <ion-label>Present Toast</ion-label>
              </ion-item>
              <ion-item>
                <ion-label>Datetime</ion-label>
                <ion-datetime></ion-datetime>
              </ion-item>
              <ion-item>
                <ion-label>Select</ion-label>
                <ion-select>
                  <ion-select-option>1</ion-select-option>
                  <ion-select-option>2</ion-select-option>
                  <ion-select-option>3</ion-select-option>
                </ion-select>
              </ion-item>
            </ion-list>
            <!-- </section> -->
          </div>
        </ion-content>
      </ion-tab>
    </ion-tabs>
  </ion-app>

  <script>
    const selects = document.querySelectorAll('.theme-picker');

    for (let i = 0; i < selects.length; i++) {
      selects[i].addEventListener('ionChange', (ev) => {
        const theme = event.detail && event.detail.value;
        toggleTheme(theme);
      })
    }

    function toggleTheme(theme) {
      var cssFile = `/src/themes/test/css-variables/css/${theme}.css`;

      var oldLink = document.getElementById('theme');

      var newLink = document.createElement('link');
      newLink.setAttribute('id', 'theme');
      newLink.setAttribute('rel', 'stylesheet');
      newLink.setAttribute('type', 'text/css');
      newLink.setAttribute('href', cssFile);

      document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);


      for (let i = 0; i < selects.length; i++) {
        selects[i].value = theme;
      }
    }

    async function presentAlert() {
      const alert = Object.assign(document.createElement('ion-alert'), {
        header: 'Alert',
        subHeader: 'Subtitle',
        message: 'This is an alert message.',
        buttons: ['OK']
      });
      document.body.appendChild(alert);
      return await alert.present();
    }

    async function presentActionSheet() {
      const actionSheet = Object.assign(document.createElement('ion-action-sheet'), {
        header: "Albums",
        buttons: [{
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: 'chevron-forward-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: 'heart',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          icon: 'close',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]
      });
      document.body.appendChild(actionSheet);
      await actionSheet.present();
    }

    async function presentLoading() {
      const loading = Object.assign(document.createElement('ion-loading'), {
        message: 'Hellooo',
        duration: 2000
      });
      document.body.appendChild(loading);

      await loading.present();

      const { role, data } = await loading.onDidDismiss();

      console.log('Loading dismissed!');
    }

    async function createModal() {
      // initialize controller
      // create component to open
      const element = document.createElement('div');
      element.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Content of doom</h1>
        <div>Here's some more content</div>
        <ion-button class="dismiss">Dismiss Modal</ion-button>
      </ion-content>
      `;


      // present the modal
      const modalElement = Object.assign(document.createElement('ion-modal'), {
        component: element
      });

      // listen for close event
      const button = element.querySelector('ion-button');
      button.addEventListener('click', () => {
        modalElement.dismiss();
      });
      document.body.appendChild(modalElement);
      return modalElement;
    }

    async function presentModal() {
      const modal = await createModal();
      await modal.present();
    }

    async function presentPopover(event) {
      const popoverElement = Object.assign(document.createElement('ion-popover'), {
        component: 'profile-page',
        event: event
      });
      document.body.appendChild(popoverElement);
      return await popoverElement.present();
    }

    class ProfilePage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header>
                <ion-label>
                  Ionic
                </ion-label>
              </ion-list-header>
              <ion-item><ion-label>Item 0</ion-label></ion-item>
              <ion-item><ion-label>Item 1</ion-label></ion-item>
              <ion-item><ion-label>Item 2</ion-label></ion-item>
              <ion-item><ion-label>Item 3</ion-label></ion-item>
            </ion-list>
          </ion-content>
        `;
      }
    }

    customElements.define('profile-page', ProfilePage);

    async function presentToast() {
      const toast = Object.assign(document.createElement('ion-toast'), {
        message: 'Hello world!',
        buttons: [
          { text: 'Close', role: 'close' }
        ]
      });
      document.body.appendChild(toast);
      await toast.present();
    }
  </script>
</body>

</html>
